<template>
    <!-- 搜索框 -->
    <div style="width: 95%;margin: auto;">
        <el-form :inline="true" :model="carForm" class="demo-form-inline">
            <el-form-item style="width: 180px;">
                <el-input v-model="carForm.brandname" placeholder="汽车品牌名" clearable style="width: 200px;">
                </el-input>
            </el-form-item>
            <el-form-item style="width: 180px;">
                <el-select v-model="carForm.ctname" placeholder="驱动类型" clearable>
                    <el-option label="燃油车" value="1"></el-option>
                    <el-option label="纯电动车" value="2"></el-option>
                    <el-option label="混合动力车" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item style="width: 180px;">
                <el-button type="primary" @click="findCars(1)">查询</el-button>
                <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 分割线 -->
        <el-divider>
            <el-icon><star-filled /></el-icon>
        </el-divider>
        <!-- 使用卡片显示信息 -->
        <div style="display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; padding: 20px;">
            <el-card v-for="item in carObj.cars" :key="item.carid" style="max-width: 280px; cursor: pointer;"
                @click="handleCardClick(item)">
                <img :src="item.imgpath" :alt="`${item.carname} 图片`" style="width: 100%;  object-fit: cover;" />
                <template #header>
                    汽车名称：{{ item.carname }}
                </template>
                <!-- 更多汽车信息 -->
                <div class="car-info">
                    <p>汽车等级: {{ item.level }}</p>
                    <p>价格: {{ item.price }}/每天</p>
                    <p>排量: {{ item.displacement }}</p>
                </div>
            </el-card>
        </div>
    </div>
</template>
<script setup>
import request from '../utils/request';
import { reactive, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
let router = useRouter();
//定义汽车查询表单
let carForm = reactive({
    // 品牌名
    brandname: "",
    // 驱动类型
    ctname: "",
})
//定义对象存放所有汽车的信息
var carObj = reactive({
    cars: [],
})
//定义一个汽车对象存放汽车的详细信息,用于给子组件传参
let card = reactive({})
// 点击卡片整体时触发
const handleCardClick = (car) => {
    //获取汽车被点击的汽车信息
    // 完整复制数据
    Object.assign(card, car);
    // 跳转路由,路由传参
    router.push({
        name: "card",
        params: { carid: car.carid },
    })
};
onMounted(async () => {
    //查询汽车基本信息
    let r = await request.get("car/findAllCars")
    if (r.data.success) {
        carObj.cars = r.data.data;
    }
})
const findCars = (car) => {

};
</script>